<script setup lang="ts">
import useSettingStore from '../setting.store'
import {onMounted, ref,toRaw} from "vue";

const settingBoards = ref({})
onMounted(() => {
  getAllBoards()
})
const settingStore = useSettingStore()
//自动加载
const getAllBoards =  () => {
  const boardList = import.meta.glob('../settingBoards/*.vue')
  Object.keys(boardList).forEach( el => {
    let fileName = el.split('/')[2]
    fileName = fileName.substring(0, fileName.length - 4)
       boardList[el]().then((res: any) => {
         settingBoards.value[fileName] = res.default
    })
  })
}

</script>
<template>
  <div class="right-board">
    <div class="setting-container">
      <component :is="toRaw(settingBoards[settingStore.selectedKeys])"></component>
    </div>
  </div>
</template>
<style lang="less" scoped>
.right-board {
  padding: 20px;
  width: 100%;

  .setting-container {
    height: 100%;
  }
}
</style>
